---
import { AstroError } from 'astro/errors';
import type { Element, Root } from 'hast';
import { rehype } from 'rehype';
import { select } from 'hast-util-select';
import UIString from './UIString.astro';

let hLevel = 'h1';
rehype()
	.data('settings', { fragment: true })
	.use(() => (tree: Root) => {
		const rootElements = tree.children.filter((item): item is Element => item.type === 'element');
		const [rootElement] = rootElements;
		const headingElement = select('h1, h2, h3, h4, h5, h6', tree);
		if (!rootElement) {
			throw new AstroError(
				'No content passed to `<StudioHeading>` component, expected a Markdown heading.'
			);
		} else if (rootElements.length > 1) {
			throw new AstroError(
				'`<StudioHeading>` component must contain a single Markdown heading. Found: ' +
					rootElements.map((el) => `<${el.tagName}>`).join(', ')
			);
		} else if (!headingElement) {
			throw new AstroError(
				'`<StudioHeading>` component must contain a heading, but could not find one.'
			);
		}
		hLevel = headingElement.tagName;
	})
	.processSync({ value: await Astro.slots.render('default') });
---

<div class={`studio-tag-wrapper level-${hLevel}`}>
	<slot />

	<span class="studio-tag">
		<svg
			aria-hidden="true"
			fill="var(--highlight-color)"
			width="16"
			height="16"
			viewBox="0 0 256 256"
		>
			<path
				d="M100 36H56a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20Zm-4 60H60V60h36Zm104-60h-44a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20Zm-4 60h-36V60h36Zm-96 40H56a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20v-44a20 20 0 0 0-20-20Zm-4 60H60v-36h36Zm104-60h-44a20 20 0 0 0-20 20v44a20 20 0 0 0 20 20h44a20 20 0 0 0 20-20v-44a20 20 0 0 0-20-20Zm-4 60h-36v-36h36Z"
			></path>
		</svg>
		<span><UIString key="studioHeading.label" /></span>
	</span>
</div>

<style>
	.studio-tag-wrapper {
		/* Display feature tag above its associated heading. */
		display: flex;
		flex-direction: column-reverse;
		/* Reinstate heading-style spacing. */
		margin-top: 1.5em !important;
	}

	.studio-tag {
		/* Use Studio brand blurple (indigo) */
		--highlight-color: hsl(239, 84%, 67%);
		--shade-color: hsla(239, 84%, 67%, 20%);
		--highlight-position: 0%;

		/* Pull inline axis out so it meets the viewport edge on smaller viewports. */
		margin-inline: calc(-1 * var(--sl-content-pad-x));

		/** Pull following content up over the gradient background. */
		--pad-top: 0.875rem;
		--pad-bottom: 0.375rem;
		--bottom-overlap: 2rem;
		padding: var(--pad-top) var(--sl-content-pad-x) calc(var(--pad-bottom) + var(--bottom-overlap));
		margin-bottom: calc(-1 * var(--bottom-overlap));
		z-index: -1;

		display: flex;
		align-items: center;
		gap: 0.5em;

		border-top: 1px solid;
		border-image-source: linear-gradient(
			to right,
			transparent,
			var(--highlight-color) var(--highlight-position),
			transparent
		);
		border-image-slice: 1;

		background:
		/* Mask layer which fades to the page background color to the left and right */
			linear-gradient(
				to right,
				var(--sl-color-bg),
				transparent var(--highlight-position),
				var(--sl-color-bg)
			),
			/* Colour layer which fades to transparent at the bottom of the element. */
				linear-gradient(to bottom, var(--shade-color), transparent);

		color: var(--sl-color-white);
		line-height: var(--sl-line-height-headings);
		font-size: var(--sl-text-xs);
		font-family: var(--__sl-font-mono);
	}
	:global([dir='rtl']) .studio-tag:not(:where([dir='rtl'] [dir='ltr'] *)) {
		--highlight-position: 100%;
	}
	@media (min-width: 88.5em) {
		/** On larger screens fade out inline-start edge too. */
		.studio-tag {
			--highlight-position: 10%;
		}
		:global([dir='rtl']) .studio-tag:not(:where([dir='rtl'] [dir='ltr'] *)) {
			--highlight-position: 90%;
		}
	}
</style>
